<div ...attributes>
  <Apis::UrlMatchForm @model={{this.urlMatchModel}} @collection={{this.model.urlMatches}} @apiExampleIncomingUrlRoot={{this.model.exampleIncomingUrlRoot}} @apiExampleOutgoingUrlRoot={{this.model.exampleOutgoingUrlRoot}} @openModal={{this.openModal}} />

  <div id="url_matches">
    <table id="url_matches_table" class="table table-striped table-sm">
      <thead>
        <tr>
          <th>Frontend Prefix</th>
          <th>Backend Prefix</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {{#if this.model.urlMatches}}
          {{#each this.model.urlMatches as |urlMatch|}}
            <tr data-guid={{guid-for urlMatch}}>
              <td>{{urlMatch.frontendPrefix}}</td>
              <td>{{urlMatch.backendPrefixWithDefault}}</td>
              <td class="table-row-actions">
                <a href="#" {{action "edit" urlMatch}}><FaIcon @icon="pencil-alt" />{{t "Edit"}}</a>
                <a href="#" class="remove-action" {{action "remove" urlMatch}}><FaIcon @icon="times" />{{t "Remove"}}</a>
              </td>
            </tr>
          {{/each}}
        {{else}}
          <tr class="empty"><td colspan="3">{{sprintf (t "No URL prefix matches have been added yet. Click \"%s\" below to get started.") (t "Add URL Prefix")}}</td></tr>
        {{/if}}
      </tbody>
    </table>
    <div class="row">
      <div class="col-6">
        <button type="button" class="btn btn-light btn-sm" {{action "add"}}><FaIcon @icon="plus-circle" /> {{t "Add URL Prefix"}}</button>
      </div>
    </div>
  </div>
</div>